import React, { useRef, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(99);

  // 1. 创建ref对象
  let timerIdRef = useRef();
  console.log('timerIdRef.current  ----->  ', timerIdRef.current); // undefined

  const handleClick = () => {
    // 2. 给ref对象.current属性赋值timerId
    timerIdRef.current = setInterval(() => {
      console.log('定时器在跑💥💥  ----->  ');
    }, 100);
    console.log('timerIdRef.current  ----->  ', timerIdRef.current); // timerId
  };

  const handleClose = () => {
    // 3. 通过ref对象.current访问
    clearInterval(timerIdRef.current);
  };

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={handleClick}>先点我-开启</button>
      <button onClick={() => setCount(count + 1)}>再点我++</button>
      <button onClick={handleClose}>最后点我-关闭</button>
      <h2>最后打开控制台观察</h2>
    </div>
  );
}
